<link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
<link href="static/ui/css/froala_editor.min.css" rel="stylesheet" type="text/css">


<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 商城管理 <span class="c-gray en">&gt;</span> 商品管理<span class="c-gray en">&gt;</span> 商品添加</nav>
	<div id="sectionContent" class="Hui-article">
		<article class="page-container">
			<div class="form form-horizontal" id="form-admin-add">
				<div class="row cl">
					<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>商品名称：</label>
					<div class="formControls col-xs-8 col-sm-9">
						<input type="text" class="input-text" id="goodsName">
					</div>
				</div>
        <div class="row cl">
					<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>BANNER：</label>
					<div class="formControls col-xs-8 col-sm-9">
            <div><img src="http://p3cxjq83j.bkt.clouddn.com/pic_not_found.png" width="80" height="80" id="classificationIconShow" style="border:1px solid #ccc;margin:10px;" accept="image/*"/></div>
						<input type="file" class="input-text" onchange="checkField($('#classificationIconShow'),$('#banner'),this.files[0])">
            <input type="hidden" id="banner" value="http://p3cxjq83j.bkt.clouddn.com/pic_not_found.png"/>
					</div>
				</div>

        <div class="row cl">
					<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>介绍图一：</label>
					<div class="formControls col-xs-8 col-sm-9">
            <div><img src="http://p3cxjq83j.bkt.clouddn.com/pic_not_found.png" width="80" height="80" id="classificationIconShow1" style="border:1px solid #ccc;margin:10px;" accept="image/*"/></div>
						<input type="file" class="input-text" onchange="checkField($('#classificationIconShow1'),$('#goodsIntroductionPics1'),this.files[0])">
            <input type="hidden" id="goodsIntroductionPics1" name="goodsIntroductionPics" value="http://p3cxjq83j.bkt.clouddn.com/pic_not_found.png"/>
					</div>
				</div>
        <div class="row cl">
          <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>介绍图二：</label>
          <div class="formControls col-xs-8 col-sm-9">
            <div><img src="http://p3cxjq83j.bkt.clouddn.com/pic_not_found.png" width="80" height="80" id="classificationIconShow2" style="border:1px solid #ccc;margin:10px;" accept="image/*"/></div>
            <input type="file" class="input-text" onchange="checkField($('#classificationIconShow2'),$('#goodsIntroductionPics2'),this.files[0])">
            <input type="hidden" id="goodsIntroductionPics2" name="goodsIntroductionPics" value="http://p3cxjq83j.bkt.clouddn.com/pic_not_found.png"/>
          </div>
        </div>
        <div class="row cl">
					<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>介绍图三：</label>
					<div class="formControls col-xs-8 col-sm-9">
            <div><img src="http://p3cxjq83j.bkt.clouddn.com/pic_not_found.png" width="80" height="80" id="classificationIconShow3" style="border:1px solid #ccc;margin:10px;" accept="image/*"/></div>
						<input type="file" class="input-text" onchange="checkField($('#classificationIconShow3'),$('#goodsIntroductionPics3'),this.files[0])">
            <input type="hidden" id="goodsIntroductionPics3" name="goodsIntroductionPics" value="http://p3cxjq83j.bkt.clouddn.com/pic_not_found.png"/>
					</div>
				</div>
        <div class="row cl">
					<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>介绍图四：</label>
					<div class="formControls col-xs-8 col-sm-9">
            <div><img src="http://p3cxjq83j.bkt.clouddn.com/pic_not_found.png" width="80" height="80" id="classificationIconShow4" style="border:1px solid #ccc;margin:10px;" accept="image/*"/></div>
						<input type="file" class="input-text" onchange="checkField($('#classificationIconShow4'),$('#goodsIntroductionPics4'),this.files[0])">
            <input type="hidden" id="goodsIntroductionPics4" name="goodsIntroductionPics" value="http://p3cxjq83j.bkt.clouddn.com/pic_not_found.png"/>
					</div>
				</div>

        <div class="row cl">
					<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>商品类型：</label>
					<div class="formControls col-xs-8 col-sm-9">
						<input type="text" class="input-text" id="classificationCodes" placeholder="类别类型,中间以逗号分隔">
					</div>
				</div>
        <div class="row cl">
					<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>库存：</label>
					<div class="formControls col-xs-8 col-sm-9">
						<input type="text" class="input-text" id="inventory" value="1">
					</div>
				</div>
        <div class="row cl">
					<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>原价(元)：</label>
					<div class="formControls col-xs-8 col-sm-9">
						<input type="text" class="input-text" id="unitPrice" value="1">
					</div>
				</div>
        <div class="row cl">
					<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>促销价(元)：</label>
					<div class="formControls col-xs-8 col-sm-9">
						<input type="text" class="input-text" id="promotionUnitPrice" value="1">
					</div>
				</div>
        <div class="row cl">
					<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>商品属性：</label>
					<div class="formControls col-xs-8 col-sm-9">
            <table class="table table-border table-bordered table-bg" id="goodsAttributes">
              <thead>
                <tr class="text-c">
                  <th>属性类别</th>
                  <th>名称</th>
                  <th><a v-on:click="addAttr()" style="cursor:pointer"><i class="Hui-iconfont">&#xe60c;</i>添加属性</a></th>
                </tr>
              </thead>
              <tbody>
                  <tr class="tr_0">
                    <td>
                      <input type="text" class="input-text" placeholder="类别名称">
                    </td>
                    <td>
                      <input type="text" class="input-text" placeholder="用顿号分割[、]">
                    </td>
                    <td>
                      <a onclick="deleteAttr(0)" style="cursor:pointer"><i class="Hui-iconfont">&#xe6e2;</i>删除属性</a>
                    </td>
                  </tr>
              </tbody>
            </table>
					</div>
				</div>
        <div class="row cl">
					<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>商品参数：</label>
					<div class="formControls col-xs-8 col-sm-9">
            <table class="table table-border table-bordered table-bg" id="goodsParameters">
              <thead>
                <tr class="text-c">
                  <th>KEY</th>
                  <th>VALUE</th>
                  <th><a v-on:click="addParam()" style="cursor:pointer"><i class="Hui-iconfont">&#xe60c;</i>添加参数</a></th>
                </tr>
              </thead>
              <tbody>
                  <tr class="tr_1000">
                    <td>
                      <input type="text" class="input-text" placeholder="KEY">
                    </td>
                    <td>
                      <input type="text" class="input-text" placeholder="VALUE">
                    </td>
                    <td>
                      <a onclick="deleteParam(1000)" style="cursor:pointer"><i class="Hui-iconfont">&#xe6e2;</i>删除参数</a>
                    </td>
                  </tr>
              </tbody>
            </table>
					</div>
				</div>
        <div class="row cl">
					<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>内容：</label>
					<div class="formControls col-xs-8 col-sm-9">
            <textarea id='contentDetails' style="margin-top: 30px;"></textarea>
					</div>
				</div>
				<div class="row cl">
					<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
						<input class="btn btn-primary" type="button" v-on:click="saveData()" value="&nbsp;&nbsp;提交&nbsp;&nbsp;" style="margin-right:30px;">
						<input class="btn" type="button" onclick="javascript:history.go(-1)" value="&nbsp;&nbsp;取消&nbsp;&nbsp;">
					</div>
				</div>
			</div>
		</article>
	</div>
<script src="static/ui/js/froala_editor.min.js"></script>
<script src="static/ui/js/plugins/tables.min.js"></script>
<script src="static/ui/js/plugins/lists.min.js"></script>
<script src="static/ui/js/plugins/colors.min.js"></script>
<script src="static/ui/js/plugins/media_manager.min.js"></script>
<script src="static/ui/js/plugins/font_family.min.js"></script>
<script src="static/ui/js/plugins/font_size.min.js"></script>
<script src="static/ui/js/plugins/block_styles.min.js"></script>
<script src="static/ui/js/plugins/video.min.js"></script>
	<script>
    $(function(){
        $('#contentDetails').editable({
          inlineMode: false,
          alwaysBlank: true,
          minHeight: 300,
          imageUploadURL: "/restful/shopping/v1.0/common/uploadFile"
        });
    });
    var attrIndex = 1;

    function deleteParam(index){
        $("#goodsParameters .tr_"+index).remove();
    }

    function deleteAttr(index){
        $("#goodsAttributes .tr_"+index).remove();
    }

    new Vue({
        el:'#sectionContent',
        http: authorization(),
        methods:{
            addAttr:function(){
                var str = '<tr class="tr_'+attrIndex+'">                                                                                                                       ';
                str += '	<td>                                                                                                                      ';
                str += '	  <input type="text" class="input-text" placeholder="类别名称">                                                           ';
                str += '	</td>                                                                                                                     ';
                str += '	<td>                                                                                                                      ';
                str += '	  <input type="text" class="input-text" placeholder="用顿号分割[、]">                                                     ';
                str += '	</td>                                                                                                                     ';
                str += '	<td>                                                                                                                      ';
                str += '				<a onclick="deleteAttr('+attrIndex+')" style="cursor:pointer"><i class="Hui-iconfont">&#xe6e2;</i>删除属性</a>  ';
                str += '	</td>                                                                                                                     ';
                str += '</tr>                                                                                                                         ';
                $("#goodsAttributes").append(str);
                attrIndex ++;
            },
            addParam:function(){
                var str = '<tr class="tr_'+attrIndex+'">                                                                                                                       ';
                str += '	<td>                                                                                                                      ';
                str += '	  <input type="text" class="input-text" placeholder="KEY">                                                           ';
                str += '	</td>                                                                                                                     ';
                str += '	<td>                                                                                                                      ';
                str += '	  <input type="text" class="input-text" placeholder="VALUE">                                                     ';
                str += '	</td>                                                                                                                     ';
                str += '	<td>                                                                                                                      ';
                str += '				<a onclick="deleteParam('+attrIndex+')" style="cursor:pointer"><i class="Hui-iconfont">&#xe6e2;</i>删除属性</a>  ';
                str += '	</td>                                                                                                                     ';
                str += '</tr>                                                                                                                         ';
                $("#goodsParameters").append(str);
                attrIndex ++;
            },
            backToList:function(){
                window.parent.location.href="#!view/shopping/goodsint/goodsint-list.html?"+Math.random();
            },
            saveData:function(){
              var attrsVal = [];
              $("#goodsAttributes tr:not(:first)").each(function(){
                   var items = $("input",this);
                   console.log('key='+$(items[0]).val());
                   console.log('value='+$(items[1]).val());

                   var attrNames = [];
                   $(items[1]).val().split("、").forEach(function(item){
                      if(item.length != 0){
                        var obj = {
                          name:item
                        }
                        attrNames.push(obj);
                      }
                   });

                   if(attrNames.length >0 ){
                     var attr = {
                        attributeType:$(items[0]).val(),
                        attributes:attrNames
                     };
                     attrsVal.push(attr);
                   }
              });

              var paramsVal = [];
              $("#goodsParameters tr:not(:first)").each(function(){
                   var items = $("input",this);
                   console.log('key='+$(items[0]).val());
                   console.log('value='+$(items[1]).val());
                   if(items.length >0){
                     var attr = {
                        name:$(items[0]).val(),
                        value:$(items[1]).val()
                     };
                     paramsVal.push(attr);
                   }
              });

              var goodsIntroductionPics = [];
              $("input[name='goodsIntroductionPics']").each(function(obj){
                  console.log($(this).val());
                  goodsIntroductionPics.push($(this).val());
              });

                var formData = {
                    goodsName:$('#goodsName').val(),
                    banner:$('#banner').val(),
                    goodsIntroductionPics:goodsIntroductionPics,
                    classificationCodes:$('#classificationCodes').val().split("、"),
                    inventory:$('#inventory').val(),
                    unitPrice:$('#unitPrice').val(),
                    promotionUnitPrice:$('#promotionUnitPrice').val(),
                    goodsAttributes:attrsVal,
                    goodsParameters:paramsVal,
                    contentDetails:$('#contentDetails').val()
                };
                this.$http.post('/restful/shopping/v1.0/goodsint',formData).then((response) => {
                    this.backToList();
                }).catch(function(response) {
                    alert(errorMsg(response));
                });
            }
        }
    });
</script>
